<template>
    <!-- <h3>注册</h3> -->
    <div class="register">
        <div class="container mt-5">
            <div class="form">
                <h3>用户注册</h3>
                <div class="mb-3">
                    <label for="account" class="form-label">账号</label>
                    <input v-model="userForm.account" type="text" class="form-control" id="account" placeholder="请输入账号">
                </div>

                <div class="mb-3">
                    <label for="username" class="form-label">用户名</label>
                    <input v-model="userForm.username" type="text" class="form-control" id="username"
                        placeholder="请输入用户名">
                </div>

                <div class="mb-3">
                    <label for="password" class="form-label">密码</label>
                    <input v-model="userForm.password" type="password" class="form-control" id="password"
                        placeholder="请输入密码">
                </div>

                <div class="mb-3">
                    <label for="password2" class="form-label">确认密码</label>
                    <input v-model="userForm.password2" type="password" class="form-control" id="password2"
                        placeholder="请确认密码">
                </div>

                <div class="mb-3">
                    <label for="formFileLg" class="form-label">上传图像</label>
                    <input @change="chooseImage" class="form-control form-control-lg" id="formFileLg" type="file">
                </div>
                <div class="mb-3">
                    <img v-if="preview" :src="preview" style="width: 150px; height: 150px;" alt="预览图片">
                </div>

                <div class="mb-3">
                    <button @click="registerFn" class="btn btn-primary">点击注册</button>
                </div>
            </div>
            <div>
                <router-link class="btn btn-sm ml-5" to="/login">已有账号,马上登录</router-link> |
                <router-link class="btn btn-sm ml-5" to="/home">跳转首页</router-link>
            </div>

        </div>
    </div>
</template>

<script setup lang="ts">
import { register, uploadPhoto } from "@/api/index"
import { reactive, ref } from "vue";
import { useRouter } from "vue-router"

interface IUser {
    account: string
    password: string
    password2: string
    username: string
    imgUrl: string
}

interface IData {
    [key: string]: string | number | undefined | any 
}

const userForm = reactive<IUser>({
    account: "",
    password: "",
    password2: "",
    username: "",
    imgUrl: ""
})


const file = ref<any>({})
const preview = ref<any>()
let imgUrl = ""
const router = useRouter()

const chooseImage = (event: any) => {
    // console.log(event)
    file.value = event.target.files[0];
    // 本地预览图片的操作
    const reader = new FileReader();
    reader.addEventListener(
        "load",
        () => {
            // 将图像文件转换为 Base64 字符串
            preview.value = reader.result;
        },
        false,
    );
    if (file.value) {
        reader.readAsDataURL(file.value);
    }
}

// 点击注册
const registerFn = async () => {
    if (file.value) {
        const formData = new FormData();
        formData.append("photo", file.value);
        await uploadPhoto(formData)
            .then(
                (resData: IData) => {
                    console.log(resData);
                    if (resData.code == 200) {
                        imgUrl = resData.picUrl;
                    }
                }
            )
    }
    console.log("imgUrl:",imgUrl);
    console.log(userForm);
    let {account,password,password2,username} = userForm;
    if(account == "" || password == "" || password2 == ""  || username == "") {
        // 希望同学们使用自定义弹窗，不要使用系统弹窗
        alert("输入框不能为空~~")
        return false;
    }

    if(password != password2) {
        alert("两次输入密码不一致~~")
        return false;
    }
    await register({account,password,username,imgUrl})
    .then(
        (resData)=>{
             alert(resData.msg)
             if(confirm("您需要跳转登录吗")){
                router.push({
                    path:"/login"
                })
             }
             else {
                router.push({
                    path:"/home"
                })
             }
        }
    )

}
</script>